<template>
  <view class="search-container">
   <view class="search-box" @click="search">
     <input type="text" v-model="searchQuery" placeholder="搜索账号，姓名，手机" />
   </view>
   <view class="add-btn" @click="add">
     <text class="icon-add">添加管理员</text>
   </view>
      <view class="filter-container">
        <view class="filter" @click="bindFilterTap">
          <text :class="{ active: currentFilter === '全部' }" data-filter="全部">全部</text>
          <text :class="{ active: currentFilter === '超管' }" data-filter="超管">超管</text>
          <text :class="{ active: currentFilter === '普通' }" data-filter="普通">普通</text>
          <text :class="{ active: currentFilter === '正常' }" data-filter="正常">正常</text>
          <text :class="{ active: currentFilter === '停用' }" data-filter="停用">停用</text>
        </view>
    </view>
 </view>
 <view class="main-admin bg-admin">
   <view class="admin-comm-list">
     <view v-if="isAdmin && isLoad">
       <view class="load text-grey">共有{{ dataList.total }}条符合条件记录</view>


       <view class="item" v-for="(item, index) in dataList.list" :key="item._id">
         <view class="no">{{ index + 1 }}</view>
         <view class="header">
           <view class="left text-cut">{{ item.ADMIN_NAME }}</view>
           <view class="right">
             <text class="text-green" v-if="item.ADMIN_STATUS == 0">正常</text>
             <text class="text-red" v-if="item.ADMIN_STATUS == 1">停用</text>
           </view>
         </view>
    
         <view class="info title-mid">
           <view class="info-item">
             <view class="title">管理员身份</view>
             <view class="mao">：</view>
             <view class="content text-bold text-red" v-if="item.ADMIN_TYPE == 1">超级管理员</view>
             <view class="content" v-else>普通管理员</view>
           </view>
    
           <view class="info-item">
             <view class="title">登录账号</view>
             <view class="mao">：</view>
             <view class="content">{{ item.ADMIN_NAME }}</view>
           </view>
    
           <view class="info-item">
             <view class="title">姓名</view>
             <view class="mao">：</view>
             <view class="content">{{ item.ADMIN_DESC || '未填写' }}</view>
           </view>
    
           <view class="info-item">
             <view class="title">手机</view>
             <view class="mao">：</view>
             <view class="content">{{ item.ADMIN_PHONE }}</view>
           </view>
    
           <view class="info-item">
             <view class="title">最近登录</view>
             <view class="mao">：</view>
             <view class="content">{{ item.ADMIN_LOGIN_CNT }}次 / {{ item.ADMIN_LOGIN_TIME }}</view>
           </view>
    
           <view class="oprt">
             <view @click="update(item)" class="btn margin-right-s">
               <text class="icon-edit margin-right-xxs"></text>编辑
             </view>
    
             <view v-if="item.ADMIN_TYPE != 1" @click="bindStatusTap(item)" class="btn margin-right-s">
               <text :class="item.ADMIN_STATUS == 1 ? 'icon-roundclose margin-right-xxs text-red' : 'icon-delete margin-right-xxs'"></text>{{ item.ADMIN_STATUS == 0 ? '停用' : '启用' }}
             </view>
    
             <view @click="bindDelTap(item.id)" class="btn margin-right-s">
               <text class="icon-delete margin-right-xxs text-orange"></text>删除
             </view>
           </view>
         </view>
       </view>
    
       <import src="../../../tpls/public/list_load_tpl.wxml" />
       <template is="listLoadTpl" :data="dataList" />
     </view>

   </view>
 </view>
</template>

<script setup>
import { ref } from 'vue';
import { 
  adminGetAdminList,
  adminUpdeteAdminState,
  adminDeleteAdmin,
  adminSearchAdmin,
  adminGetAdminListByClassify
 } from '@/request/api.js'
 import {
		onLoad
	} from '@dcloudio/uni-app';
const dataList = ref({
total:0,
list: []
});
const isSuperAdmin = ref(false);
const isAdmin = ref(true);
const isLoad = ref(true);
const currentFilter = ref('全部'); // 初始化当前过滤器为空
const searchQuery =ref('')
onLoad(async (e) => {
  if(e.search!=undefined){
    currentFilter.value='';
    searchQuery.value=e.search;
    adminSearchAdmin({
		content:e.search
	  }).then(res=>{
      if (Array.isArray(res.data.data)) {
      dataList.value.total = res.data.data.length;
      dataList.value.list = res.data.data.map(item => ({
        ADMIN_NAME: item.accountNumber,
        ADMIN_DESC: item.name,
        ADMIN_PHONE: item.phone,
        ADMIN_STATUS: item.state,
        ADMIN_LOGIN_CNT:item.loginCount,
        ADMIN_LOGIN_TIME: item.time,
        ADMIN_TYPE:item.position,
        id: item.id
      }));
    }
  })
  }else{
    adminGetAdminList().then((res) => {
    console.log(res)
    if (Array.isArray(res.data.data)) {
      dataList.value.total = res.data.data.length;
      dataList.value.list = res.data.data.map(item => ({
        ADMIN_NAME: item.accountNumber,
        ADMIN_DESC: item.name,
        ADMIN_PHONE: item.phone,
        ADMIN_STATUS: item.state,
        ADMIN_LOGIN_CNT:item.loginCount,
        ADMIN_LOGIN_TIME: item.time,
        ADMIN_TYPE:item.position,
        id: item.id
      }));
    }
  });
  }
	});
function bindFilterTap(event) {
  searchQuery.value='';
  const filterType = event.target.dataset.filter;
  if(filterType!=undefined){
    console.log("被点击的过滤器:", filterType);
    adminGetAdminListByClassify({
      classify:filterType
	  }).then(res=>{
      if (Array.isArray(res.data.data)) {
      dataList.value.total = res.data.data.length;
      dataList.value.list = res.data.data.map(item => ({
        ADMIN_NAME: item.accountNumber,
        ADMIN_DESC: item.name,
        ADMIN_PHONE: item.phone,
        ADMIN_STATUS: item.state,
        ADMIN_LOGIN_CNT:item.loginCount,
        ADMIN_LOGIN_TIME: item.time,
        ADMIN_TYPE:item.position,
        id: item.id
      }));
    }
  })
  }
  currentFilter.value = filterType; // 更新当前过滤器
}
function search(){
  uni.redirectTo({
        url: '/pages/admin/mgr/list/search/admin_mgr_search'
      });
}
function add(){
  uni.navigateTo({
        url: '/pages/admin/mgr/list/add/admin_mgr_add'
      });
}
function bindStatusTap(item){
  console.log(item.id)
  adminUpdeteAdminState({id:item.id}).then((res) => {
    if (res.data.code == 200) {
        uni.showToast({
          title: '操作成功',
          icon: 'none'
        });
        const index = dataList.value.list.findIndex((i) => i.id === item.id);
      if(currentFilter.value=="正常" || currentFilter.value=="禁用"){
        if (index !== -1) {
          dataList.value.list.splice(index, 1);
          dataList.value.total = dataList.value.total-1;
        }
      }else{
          // 查找 dataList.list 中对应的项并更新其 ADMIN_STATUS
        if (index !== -1) {
          dataList.value.list[index].ADMIN_STATUS = item.ADMIN_STATUS === 1 ? 0 : 1;
        }
      }
      }else{
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
      }
  });
}
function bindDelTap(id){
  wx.showModal({
    title: '删除管理员',
    content: '您确定要删除管理员吗？',
    success(res) {
      if (res.confirm) {
        adminDeleteAdmin({id:id}).then((res) => {
          if (res.data.code == 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'none'
            });
            const index = dataList.value.list.findIndex((i) => i.id === id);
            if (index !== -1) {
              dataList.value.list.splice(index, 1);
            }
          }
        })
      }
    }
  });
}
function update(item){
  uni.navigateTo({
      url: '/pages/admin/mgr/list/edit/admin_mgr_edit?id='+item.id
    });
}
</script>
<style scoped>
.main-admin {
 /* width: 100%; */
 padding: 30rpx 20rpx;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: flex-start;
 box-sizing: border-box;
 margin-bottom: 100rpx;
 background-color: #cecece33;
}
.admin-comm-list {
 width: 100%;
 /* padding: 0rpx 20rpx 0rpx; */
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
}
.load.text-grey {
 color: #999 !important;
}
.admin-comm-list .item {
 /* width: 100%; */
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 background-color: #fff;
 border-radius: 5rpx;
 overflow: hidden;
 margin-bottom: 30rpx;
 position: relative;
 border: 1rpx solid #ccc;
}
.admin-comm-list .item .no {
 position: absolute;
 bottom: 0;
 right: 10rpx;
 z-index: 99999;
 font-size: 38rpx;
 font-weight: bold;
 color: #ccc;
 opacity: .5;
}
.admin-comm-list .item:last-child {
 margin-bottom: 0;
}


.admin-comm-list .item .header {
 /* width: 100%; */
 font-size: 28rpx;
 text-align: left;
 line-height: 2.6;
 padding: 0 15rpx;
 display: flex;
 background-color: #f2f2f2;
 justify-content: space-between;
 align-items: center;
}
.admin-comm-list .item .header .left {
 flex: 1;
 font-size: 29rpx;
 text-align: left;
 line-height: 2.6;
 padding: 0 5rpx;
 text-align: left;
 font-weight: bold;
}
.admin-comm-list .item .header .right {
 min-width: 100rpx;
 text-align: right;
}
.admin-comm-list .item .info {
 width: 100%;
 flex-direction: column;
 align-items: flex-start;
 justify-content: flex-start;
 background-color: #fff;
 min-height: 150rpx;
 padding: 15rpx 20rpx 30rpx;
 position: relative;
}
.admin-comm-list .item .info .info-item {
 width: 100%;
 display: flex;
 align-items: flex-start;
 justify-content: flex-start;
 background-color: #fff;
 line-height: 1.5;
 font-size: 26rpx;
 margin-bottom: 20rpx;
}
.admin-comm-list .item .info.title-mid .info-item .title {
 width: 150rpx;
 display: flex;
}
.admin-comm-list .item .info .info-item .title {
 width: 110rpx;
 color: #333;
 text-align: right;
 font-weight: bold;
}
.admin-comm-list .item .info .info-item .mao {
 color: #333;
 text-align: left;
 margin-right: 10rpx;
}
.admin-comm-list .item .info .info-item .content {
 flex: 1;
 /* color: #555; */
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 display: flex;
 flex-wrap: wrap;
}
.text-red {
 color: var(--adminRedColor) !important;
}
.title {
 font-weight: bold; /* 字体加粗 */
}
.text-red {
 color: red !important; /* 字体颜色设置为红色 */
}
.content.text-bold.text-red {
 font-weight: bold; /* 字体加粗 */
}
.text-green {
 color: #008000; /* 标准的绿色 */
}
.text-red {
 color: red; /* 红色 */
}
.oprt {
 display: flex;
 justify-content: center;
 margin-top: 20px;
}

.btn {
 display: flex;
 align-items: center;
 padding: 8px 12px;
 border-radius: 4px;
 background-color: #f0f0f0;
 color: #333;
 margin-right: 10px;
 cursor: pointer;
 transition: background-color 0.3s;
}

.btn:hover {
 background-color: #e0e0e0;
}

.icon-edit, .icon-roundclose, .icon-delete {
 margin-right: 6px;
}

.text-orange {
 color: #f56c6c;
}

.text-red {
 color: red;
}

/* 特定操作按钮的样式 */
.btn-edit {
 color: #409eff;
}

.btn-status {
 color: #67c23a;
}

.btn-delete {
 color: #f56c6c;
}

/* 当鼠标悬停在按钮上时的样式 */
.btn-edit:hover {
 background-color: #409eff;
 color: #fff;
}

.btn-status:hover {
 background-color: #67c23a;
 color: #fff;
}

.btn-delete:hover {
 background-color: #f56c6c;
 color: #fff;
}
.load.text-grey {
 font-size: 14px; /* 设置字体大小 */
 color: #909399; /* 设置字体颜色为浅灰色 */
 text-align: center; /* 文本居中 */
 margin-bottom: 15px; /* 与下方元素的间距 */
 line-height: 1.5; /* 行高，增加阅读体验 */
}


.search-container {
 /* display: flex; */
 justify-content: space-between;
 align-items: center;
 margin-top: 7px; /* 距离顶部5px */
 padding-left: 10px; /* 距离左边10px */
 max-height: 77px;
}

.search-box {
 flex-grow: 1;
 display: flex;
 align-items: center;
 border: 1px solid #dcdfe6; /* 边框颜色 */
 border-radius: 4px; /* 圆角 */
 padding: 0px 15px; /* 内边距调整为更紧凑 */
 background-color: #fff; /* 背景色 */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
 max-width: 202px; /* 设置搜索框的最大宽度 */
}

.search-box input {
 flex-grow: 1;
 border: none;
 padding: 6px 0;
 font-size: 14px; /* 字体大小 */
 color: #606266; /* 字体颜色 */
}

.search-box button {
 padding: 0 10px;
 background-color: #2196F3; /* 按钮背景色 */
 color: #fff; /* 字体颜色 */
 border: none;
 border-radius: 4px; /* 圆角 */
 cursor: pointer;
 font-size: 14px; /* 字体大小 */
 outline: none; /* 移除焦点轮廓 */
}

.search-box button:hover {
 background-color: #1e88e5; /* 鼠标悬停时的背景色 */
}

.add-btn {
 padding: 6px 10px;
 background-color: #2196F3; /* 按钮背景色 */
 color: #fff; /* 字体颜色 */
 border: none;
 border-radius: 4px; /* 圆角 */
 cursor: pointer;
 font-size: 14px; /* 字体大小 */
 outline: none; /* 移除焦点轮廓 */
 max-width: 86px;
 position: relative;
 top: -35px;
 left: 246px;
}

.add-btn:hover {
 background-color: #1e88e5; /* 鼠标悬停时的背景色 */
}

.icon-add {
 margin-right: 5px; /* 图标与文本间距 */
 font-size: 16px; /* 图标大小 */
}


/* 分类 */
.filter-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  position: relative;
  top: -16px;
  left: -58px;
}

.filter {
  display: flex; /* 水平排列 */
}

.filter text {
  margin: 0 10px; /* 每个文本之间的间距 */
  cursor: pointer; /* 鼠标悬停时的手势 */
  transition: color 0.3s; /* 颜色变化的过渡效果 */
}
.filter text.active {
  color: #2196F3; /* 被选中的文本颜色为蓝色 */
}
</style>